<template>
  <div class="report-template" ref="reportRef">
    <div class="report-header">
      <div class="header-content">
        <h2>检验结果报告单</h2>
        <div class="qrcode-container">
          <div v-if="data.qrUrl" class="qr-code">
            <QRCodeVue3
              :value="data.qrUrl"
              :width="100"
              :height="100"
              :margin="2"
              :dotsOptions="{
                color: '#000',
                type: 'rounded'
              }"
            />
            <div class="qr-code-text">扫码查看报告</div>
          </div>
        </div>
      </div>
      <div class="report-info">
        <div class="info-row">
          <span>单据编号:{{ data.voucherNum }}</span>
          <span>报告时间：{{ data.reportDate }}</span>
          <span>样品编号：{{ data.sampleNum }}</span>
        </div>
        <div class="info-row">
          <span>样品名称：{{ data.sampleName }}</span>
          <span>规格型号：{{ data.model }}</span>
          <span>执行标准：{{ data.executiveStandard }}</span>

        </div>
        <div class="info-row">
          <span>抽样地点：{{ data.samplingSite }}</span>
          <span>抽样时间：{{ data.samplingDate }}</span>
          <span>检验时间：{{ data.checkStartTime }}</span>
        </div>
        <div class="info-row">
          <span>承检单位：{{ data.orgName }}</span>
          <span>实验室名称：{{ data.labName }}</span>
        </div>
      </div>
    </div>

    <div class="report-body">
      <!-- <table class="inspection-table">
        <thead>
          <tr>
            <th>检测项目</th>
            <th>单位</th>
            <th style="width: 100px;">设计要求</th>
            <th>检测结果</th>
            <th>单项判定</th>
            <th>执行标准</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data.checkResultList" :key="index">
            <td>{{ item.checkProject }}</td>
            <td>{{ item.unit }}</td>
            <td style="width: 100px;">{{ item.designRequire }}</td>
            <td>{{ item.checkResult }}</td>
            <td>{{ item.singleDecision }}</td>
            <td>{{ item.executeStandard }}</td>
            <td>{{ item.remark }}</td>
          </tr>
        </tbody>
      </table> -->
   
      <el-table :header-cell-class-name = "tableHeader"  :data="data.checkResultList"  style="width: 100%;">
   

        <el-table-column prop="checkProject"  label="检测项目"/>


        <el-table-column prop="unit" label="单位"/>


        <el-table-column prop="designRequire" label="设计要求" width="100"/>


        <el-table-column prop="checkResult" label="检测结果"/>


        <el-table-column prop="singleDecision" label="单项判定"/>


        <el-table-column prop="executeStandardName" label="执行标准"/>


        <el-table-column prop="remark" label="备注"/>
      
      
  
      </el-table>

    </div>

    <div class="report-footer">
      <p class="check-conclusion">检验结论：{{ data.checkConclusion }}</p>
      <p class="check-reamrk">备注：{{ data.requireRemark }}</p>
    </div>

  
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import QRCodeVue3 from 'qrcode-vue3'

const props = defineProps<{
  data: {
    serialNo: string
    reportTime: string
    sampleNo: string
    standard: string
    samplingLocation: string
    inspectionUnit: string
    qrCodeUrl: string
    items: Array<{
      name: string
      unit: string
      requirement: string
      result: string
      judgment: string
      standard: string
      remark: string
    }>
    conclusion: string
    remark: string
  }
}>()

const reportRef = ref<HTMLElement | null>(null)

const tableHeader = ()=>{
  return 'check-result-list';
}

defineExpose({
  reportRef
})
</script>

<style lang="scss" scoped>
.report-template {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm;
  margin: 0 auto;
  color:#000;
  background: white;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);

  .report-header {
    margin-bottom: 20px;
    text-align: center;

    .header-content {
      position: relative;
      margin-bottom: 20px;

      h2 {
        margin-bottom: 20px;
        font-size: 30px;
        font-weight: 600;
        color: #000;
      }

      .qrcode-container {
        position: absolute;
        top: -60px;
        right: -70px;
        
        .qr-code {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 10px;
          background: white;
          border: 1px solid #eee;
          border-radius: 4px;

          .qr-code-text {
            margin-top: 5px;
            font-size: 12px;
            color: #666;
          }
        }
      }
    }

    .report-info {
      text-align: left;
      
      .info-row {
        display: flex;
        margin: 10px 0;
        gap: 40px;
      }
    }
  }

  .inspection-table {
    max-width:200px ;
    margin: 20px 0;
    border-collapse: collapse;

    th, td {
      padding: 8px;
      text-align: center;
      border: 1px solid #000;
    }

    th {
      background-color: #f5f5f5;
    }
  }

  .report-footer {
    display: flex;
    width: 100%;
    margin-top: 20px;
    justify-content: center;
    flex-direction: column;


    .check-conclusion{
      font-size: 20px;
      font-weight: 600;
      color: #000;
    }

    p {
      margin: 10px 0;
      text-align: center;
    }
  }


  .el-table thead {
    color: #000 !important;
  }

  ::v-deep(.el-table--default .cell){
    color: #000 !important;
  }

  ::v-deep(.el-table tr){
    color: #000 !important;
    border: #000 solid 1px;
  }

  ::v-deep(.el-table th.is-leaf){
    color: #000 !important;
  }

  ::v-deep(.el-table--border::after, .el-table--group::after, .el-table::before){
    background-color: #000 !important;
  }
}


.check-reamrk{
  font-size: 16px;
  color: #000;
 
}


.el-table,
.el-table__expanded-cell {
  border-color: black;
}

.el-table th,
.el-table td {
  border-color: black;
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: black;
}

.el-table--border,
.el-table--group {
  border-color: black;
}

.el-table td.gutter,
.el-table th.gutter {
  border-color: black;
}

::v-deep(.el-table tr) {
  border-top-color: black;
  border-bottom-color: black;
}
</style> 